import Taro, { Component } from '@tarojs/taro';
import { View, Image, Text, Button ,Label} from '@doctorwork/components';
import { connect } from '@tarojs/redux';
import Navigate from '../../components/Navigate/index';
import { rewriteAddMTA } from './../../model/utils/rewrite';
import { timeFormat } from '../../model/utils/common';
import './index.styl';

@connect(({ detail }) => ({
    ...detail
}))
@rewriteAddMTA
export default class Detail extends Component {

    config = {
        navigationBarTitleText: '加油详情'
    };
    componentDidShow() {
        const { id } = this.$router.params;
        this.props.dispatch({
            type: 'detail/init',
            payload: {
                id
            }
        });
    }
    componentDidHide() {
    }
    /**
     * 删除一条记录
     * @param {*} id 
     */
    deleteOil(id) {
        
        const _this = this;
        wx.showModal({
            title: '提示',
            content: '确定要删除记录么？',
            success (res) {
                if (res.confirm) {
                    _this.props.dispatch({
                        type: 'detail/delete',
                        payload: {
                            id
                        }
                    });
                } else if (res.cancel) {
                    console.log('用户点击取消');
                }
            }
        });
    }
    /**
     * 去编辑
     */
    jumpEdit(){
        const {detail} = this.props;
        this.props.dispatch({
            type: '$router/forward',
            payload: {
                url: '/pages/create/index?id='+detail.id
            }
        });
    }
    render() {
        const { detail } = this.props;
        return (
            <View className='container'>
                <Navigate
                    title='加油详情'
                    color='black'
                    backgroundColor='white'
                    backTextColor='black'
                />
                {
                    detail ?
                        <View className='oil-detail'>
                            {/* <View className="detail-title">
                                加油详情
                            </View> */}
                            <View className='oil-list'>

                                <View className='oil-item'>
                                    <View className='oil-title'>
                                        车辆：
                                    </View>
                                    <View className='oil-value'>
                                        {detail.carNumber}
                                    </View>
                                </View>

                                <View className='oil-item'>
                                    <View className='oil-title'>
                                        加油时间：
                                    </View>
                                    <View className='oil-value'>
                                        {timeFormat(new Date(detail.oilTime))}
                                    </View>
                                </View>

                                <View className='oil-item'>
                                    <View className='oil-title'>
                                        油价：
                                    </View>
                                    <View className='oil-value'>
                                        {detail.price}
                                    </View>
                                </View>

                                <View className='oil-item'>
                                    <View className='oil-title'>
                                        总金额：
                                    </View>
                                    <View className='oil-value'>
                                        ¥ {detail.totalPrice}
                                    </View>
                                </View>

                                <View className='oil-item'>
                                    <View className='oil-title'>
                                        加油量：
                                    </View>
                                    <View className='oil-value'>
                                        {detail.oilAmount} (L)
                                    </View>
                                </View>

                                <View className='oil-item'>
                                    <View className='oil-title'>
                                        当前汽车行驶里程：
                                    </View>
                                    <View className='oil-value'>
                                        {detail.mileage} (km)
                                    </View>
                                </View>


                            </View>
                            {
                                detail.hasLast ? <View className='ele-list'>

                                    <View className='ele-space'></View>
                                    <View className='ele-item'>
                                        <View className='ele-img'>
                                            <Image src={require('./imgs/time.png')} />
                                        </View>
                                        <View >
                                            <View className='ele-title'> 时间 </View>
                                            <View className='ele-desc'> 上次加油时间是{detail.lastTime}, 距离上次加油共<Text className='emphasize'>{detail.duration}</Text>天 </View>
                                        </View>
                                    </View>
                                    <View className='ele-item'>
                                        <View className='ele-img'>
                                            <Image src={require('./imgs/mileage.png')} />
                                        </View>
                                        <View >
                                            <View className='ele-title'> 里程 </View>
                                            <View className='ele-desc'> 这期间一共行驶了<Text className='emphasize'>{detail.distance}</Text>公里 </View>
                                        </View>
                                    </View>
                                    <View className='ele-item'>
                                        <View className='ele-img'>
                                            <Image src={require('./imgs/money.png')} />
                                        </View>
                                        <View >
                                            <View className='ele-title'> 单价 </View>
                                            <View className='ele-desc'> 这段时间平均<Text className='emphasize'>{detail.univalence/100}</Text>元/公里 </View>
                                            <View className='notice'><Label className='icon'>!</Label> 按本次和上次都加满油计算</View>
                                        </View>
                                    </View>
                                    <View className='ele-item'>
                                        <View className='ele-img'>
                                            <Image src={require('./imgs/oil.png')} />
                                        </View>
                                        <View >
                                            <View className='ele-title'> 油耗 </View>
                                            <View className='ele-desc'> 100公里平均油耗<Text className='emphasize'>{detail.consumption}</Text>L </View>
                                            <View className='notice'><Label className='icon'>!</Label> 按本次和上次都加满油计算</View>
                                        </View>
                                    </View>
                                    {/* <View className="ele-item">
                                    <View className="ele-title"> 里程 </View>
                                    <View className="ele-desc"> 您上次加油时间:{detail.last_time} </View>
                                </View> */}
                                </View> : ''
                            }
                            <View className='footer'>
                                <View className='edit' onClick={this.jumpEdit.bind(this)} data-name='编辑'>
                                    编辑
                                </View>
                                <View className='delete' onClick={this.deleteOil.bind(this, detail.id)} data-name='删除'>
                                    删除
                                </View>
                            </View>

                        </View>
                        : null
                }

            </View>

        );
    }
}
